<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .w {
            width: 1000px;
            margin: 20px auto;
        }

        .container {
            margin-bottom: 100px;
        }

        .row {
            display: flex;
        }

        .row:first-child {
            background-color: #f0f0f0;
            font-weight: 700;
            color: #333;
        }

        .row>div {
            flex: 1;
            padding: 10px;
            text-align: center;
            border-bottom: 1px solid #ccc;
        }

        .price,
        .total-price {
            color: #E2211C;
            font-weight: 700;
        }

        .step {
            margin: auto;
            height: 40px;
            width: fit-content;
            height: fit-content;
            border: 1px solid #f0f0f0;
            display: flex;
            align-items: center;
        }

        .step button {
            cursor: pointer;
            border: 0;
            background-color: #f0f0f0;
            padding: 6px 10px;
        }

        .step input {
            width: 20px;
            text-align: center;
            border: 0;
            outline: none;
        }

        .btn {
            border: 0;
            background-color: #f0f0f0;
            padding: 4px 10px;
            letter-spacing: 4px;
            cursor: pointer;
        }

        .btn-danger {
            background-color: #E2211C;
            color: #fff
        }

        .submit-bar-outer {
            position: fixed;
            bottom: 0;
            left: 0;
            width: 100%;
            background-color: #fff;
            box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
        }

        .submit-bar {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .submit-bar button {
            border: 0;
            background-color: #E2211C;
            color: #fff;
            padding: 10px 20px;
            cursor: pointer;
        }

        .goods-list {
            display: flex;
            gap: 10px;
        }

        .goods-card {
            width: 200px;
            height: 220px;
            box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
            text-align: center;
            padding: 16px;
        }
    </style>
</head>

<body>

    <!-- 购物车列表 -->
    <h3 class="w">购物车列表</h3>
    <hr>
    <div class="container w">
        <div class="row">

            <div>
                商品名称
            </div>
            <div>
                商品图片
            </div>
            <div>
                商品价格
            </div>
            <div>
                商品数量
            </div>
            <div>
                商品小计
            </div>
            <div>
                操作
            </div>
        </div>
        <!-- <div class="row">

            <div>
                苹果手机
            </div>
            <div>
                <img src="https://dummyimage.com/100x100/FAAB1C/fff" alt="">
            </div>
            <div class="price">
                &yen;9999.99
            </div>
            <div>
                <div class="step">
                    <button>-</button><input readonly type="text" value="1"> <button>+</button>
                </div>
            </div>
            <div class="price">
                &yen;9999.99
            </div>
            <div>
                <button class="btn btn-danger">移除</button>
            </div>
        </div> -->
        <div class="tbody"></div>

    </div>

    <script>
        var tbody = document.querySelector('.tbody')
        //   通过本地存储获取购物车列表数据
        var cartList = JSON.parse(localStorage.getItem('cartList') || '[]')
        // 初次渲染数据
        render()
        // 渲染购物车列表数据
        function render() {
            // [{id,goodsname,price,num,cover},{id,goodsname,price,num,cover}]
            var html = ''
            cartList.forEach(function (item, index) {
                html += '<div class="row">'
                html += '<div>' + item.goodsname + '</div>'
                html += '<div><img src="' + item.cover + '"></div>'
                html += '<div class="price">' + item.price + '</div>'
                html += '<div><div class="step"><button onclick="update(' + index + ',1)">-</button><input readonly type="text" value="' + item.num + '"><button onclick="update(' + index + ',2)">+</button></div></div>'
                html += '<div class="price">&yen;' + (item.price * item.num) + '</div>'
                html += '<div><button onclick="del(' + index + ')" class="btn btn-danger">移除</button></div>'
                html += '</div>'
            })
            // 将拼接好的html显示到页面中
            tbody.innerHTML = html
        }
        // 删除按钮点击事件处理函数
        function del(index) {
            // 1-删除数组元素
            cartList.splice(index, 1)
            // 2-更新本地存储localStorage
            localStorage.setItem('cartList', JSON.stringify(cartList))
            // 3-更新html
            render()
        }

        // 更新按钮点击事件处理函数
        function update(index, type) {
            // 减少
            if (type == 1) {
                if (cartList[index].num > 1) {
                    cartList[index].num -= 1
                }
            } else {  // 增加
                cartList[index].num += 1
            }
            // 更新本地存储
            localStorage.setItem('cartList', JSON.stringify(cartList))
            // 更新html
            render()
        }
    </script>

</body>

</html>